<template>
  <div>
    <span>name:{{ name }}</span>
    <el-input type="text" v-model="name" style="width :210px"/>
    <span>更多信息:{{ obj.msg }}</span>
    <el-input type="text" v-model="obj.msg" style="width :210px"/>
  </div>
</template>

<script>
export default {
  name: "binding",
  data() {
    return {
      name: 'jack',
      obj: {msg: 'good'}
    }
  },
  watch:{

  },
  methods: {
    // 数据劫持-监听实例中的数据
    Observer(data_instance) {
       // 递归出口
      if ((!data_instance || typeof data_instance !== 'object'))
        return
      Object.keys(data_instance).forEach(key => {
        let value = data_instance[key];
        this.Observer(value); // 递归 ， 子属性劫持
        Object.defineProperty(data_instance, key, {
          enumerable: true,
          configurable: true,
          get() {
            console.log(`访问了属性:${key}->值是${value}`)
            return value
          },
          set(newValue) {
            console.log(`属性${key}的值${value}修改为->${newValue}`)
            value = newValue
          }
        })
      })
    },
  }
}
</script>

<style scoped>

span {
  margin-left: 18px;
}
</style>
